<template>
	<view class="list">
		<view class="wrap flex" v-for="(item,index) in list" :key="item.id" @tap="click(item.id)">
			<view class="img-box">
				<image :src="item.logo" mode="aspectFill" class="img"></image>
			</view>
			<view class="font">
				<view class="h3 line1">
					{{item.name}}
				</view>
				<view class="p line2">
					地址：{{item.address}}
				</view>
			</view>
			<view class="em">
				{{item.distance}}
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	export default {
		//属性
		props: {
			list:{
				type: Array,
				default () {
					return [];
				}
			},
		},
		methods: {
			click(id){
				this.$emit('onClick',id);
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.list{
		.wrap{
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 16rpx;
			padding: 32rpx;
			.img{
				width: 120rpx;
				height: 120rpx;
				margin-right: 32rpx;
			}
			.font{
				width: 0;
				flex: 1;
				font-size: $font-b;
				.h3{
					color: $black;
				}
				.p{
					margin-top: 8rpx;
					color: rgba(0,0,0,.3);
				}
			}
			.em{
				font-size: $font-s;
				color: #888;
				margin-left: 10rpx;
			}
		}
	}
</style>